// node_modules
import { useState } from 'react';
import { Swiper, Toast, Image, Tabs } from 'antd-mobile-v5';

// 项目公共模块
import { time } from '@/utils/time';

// 当前业务耦合模块
import { imgList } from '@/img';
import { params } from './interface';
import TeachForm from './components/form';
import TeachList from './components/list';

// 样式文件
import styles from './index.less';

const items = imgList.map((color, index) => (
  <Swiper.Item key={index}>
    <Image
      style={{ height: 200 }}
      src={color}
      className={styles['swip-content']}
      onClick={() => {
        Toast.show(`你点击了卡片 ${index + 1}`);
      }}
    >
      {index + 1}
    </Image>
  </Swiper.Item>
));

export default function Teach() {
  const [visible, setVisible] = useState(false);
  const teaArr = [
    { id: 1, balue: '普通讲师' },
    { id: 2, balue: '高级讲师' },
    { id: 3, balue: '特聘讲师' },
    { id: 4, balue: '超级讲师' },
  ];
  const [data, setData] = useState<string[]>([]);
  const [params, setParams] = useState<params>({
    status: 1, //1 普通讲师  //2 高级讲师  //3特聘讲师  //4超级讲师   示例 status:1
    pageNo: 0, //传入的页数   示例 pageNo:1
    pageSize: 5, //每页的数量  示例 pageSize:5
    username: '', //讲师名称,模糊搜索 示例 username:"test"
    tags: [], //筛选的标签  示例 tags:["新手"，“体验中心”]
  });
  const [hasMore, setHasMore] = useState(true);
  /**
   * 触发更新的条件
   * 当页面触底，则为false，说明不更新
   * 每次条件切换需要重新设为true
   */

  const setStatus = (e: string) => {
    setHasMore(true);
    setData([]);
    setParams((val) => ({
      ...val,
      status: +e,
      pageNo: 0,
      username: '',
      tags: [],
    }));
  };

  return (
    <div>
      <Swiper autoplay loop>
        {items}
      </Swiper>

      <div className={styles['introduce-style']}>
        <h2>讲师简介</h2>
        <p>COMPANY PROFILE </p>
        <p>
          &nbsp;&nbsp;&nbsp;&nbsp;测试文字测试文字测试文字测试文字测试文字为商家、企业、品牌等不同阶段的电商、新零售从业提供多元化的学习和赋能。十余年来
        </p>
        <p>
          &nbsp;&nbsp;&nbsp;&nbsp;测试文字测试文字测试文字测试文字测试文字为商家、企业、品牌等不同阶段的电商、新零售从业提供多元化的学习和赋能。十余年来
        </p>
        <div className={styles['display-content']}>
          {'距离课程开始还有' + time()}
        </div>
      </div>
      <Tabs
        className={styles['tab-style']}
        onChange={setStatus}
        style={{
          '--active-line-color': '#fff',
          '--active-title-color': '#fff',
          position: 'sticky',
        }}
      >
        {teaArr.map((item) => (
          <Tabs.Tab title={item.balue} key={item.id} />
        ))}
      </Tabs>
      <TeachList
        setVisible={setVisible}
        params={params}
        setParams={setParams}
        data={data}
        setData={setData}
        hasMore={hasMore}
        setHasMore={setHasMore}
      />
      <TeachForm
        visible={visible}
        setVisible={setVisible}
        setParams={setParams}
        setData={setData}
        setHasMore={setHasMore}
      />
    </div>
  );
}
